<template>
  <div :id="chartId" style="width: 100%;height: 100%;"></div>
</template>

<script>
// 柱状图
export default {
  name: 'lineChart',
  props: {
    chartId: {
      type: String,
      default: 'chart'
    },
    unit: {
      type: String,
      default: '元'
    },
    // legendData:{
    //   type: Array,
    //   default: ()=>[]
    // },
    xData: {
      type: Array,
      default: () => []
    },
    seriesDatas: {
      type: Array,
      default: () => []
    },
  },
  mounted() {
    var legendData = ['交易额', '交易订单数','商品数量'];
    var xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    var seriesDatas = [[83, 56, 77, 99, 83, 56, 77, 99, 83, 56, 77, 99], [62, 55, 67, 82, 83, 56, 77, 99, 83, 56, 77, 99]];

    this.drawManyBar('订单统计', legendData, xData, this.seriesDatas)
  },
  methods: {
    /**
     * 画多维柱状图
     * @param legendData 菜单列表
     * @param xData x轴数据
     * @param seriesDatas 多维图表数据
     */
    drawManyBar(titleName, legendData, xData, seriesDatas) {
      function contains(arr, val) {
        var i = arr.length;
        while (i--) {
          if (arr[i].name === val) {
            return i;
          }
        }
        return false;
      }
      let list = [
        {
          name: '道路结冰',
          max: 88,
        },
        {
          name: '暴雪',
          max: 88,
        },
        {
          name: '暴雨',
          max: 88,
        },
        {
          name: '冰雹',
          max: 88,
        },
        {
          name: '大风',
          max: 88,
        },
      ];
      let option = {
        color: ['#5189F8'], // 雷达线的颜色
        title: {
          text: ''
        },
        radar: {
          formatter: (a) => {
            let i = contains(list, a); // 处理对应要显示的样式
            return `{a| ${a}}\n{b| ${data1[0][i] + data2[0][i]}万}`;
          },
          // shape: 'circle',
          // 设置成相对的百分比
          center: ['50%', '50%'],
          radius: '70%',
          axisName: {
            color: 'red'
          },
          splitArea: {
            show: true
          },
          indicator: [
            { name: '技术', max: 6500 },
            { name: '质量', max: 16000 },
            { name: '价格', max: 30000 },
            { name: '交期', max: 38000 },
            { name: '服务', max: 52000 },
          ]
        },
        series: [
          {
            areaStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [ // 雷达包括范围的颜色
                  {
                    offset: 0,
                    color: 'rgba(137, 190, 252)', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(81, 137, 248)', // 100% 处的颜色
                  },
                ],
              },
            },
            name: '评分',
            type: 'radar',
            lineStyle: {
              width: 1
            },
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
              },
            ]
          }
        ]
      };
      var ticket = this.$echarts.init(document.getElementById(this.chartId)),
        ticketOption = {
          legend: {
            icon: "roundRect",
            top: '3%',
            right: "5%",
            itemWidth: 30,
            textStyle: {
              color: "#556677",
            },
          },
          grid: {
            left: '6%',
            right: '6%',
            bottom: '12%',
            top: '18%',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: params => params.reduce((p, v, k) => p += `<br/><div style="height:10px;width:10px;background:${v.color};border-radius:10px;display: inline-block;margin: 0 4px;"></div>${v.seriesName}: ${k == 0 ? ('￥' + (v.value||0).toFixed(2) + '万元'): (v.value||0)}`, `<div>${params[0].name}`)
          },
          xAxis: [{
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#ccc',
                width: 1,
                type: 'solid',
              }
            },
            //x轴字体设置
            axisLabel: {
              show: true,
              fontSize: 12,
              color: '#444'
            },
            data: xData
          }],
          yAxis: [
            {
              type: "value",
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#DCE2E8",
                },
              },
              axisLabel: {
                show: true,
                color: '#444',
                fontSize: 12
              },
              splitLine: {
                show: false,
              },
            },
            {
              type: "value",
              position: "right",
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
                color: '#444',
                fontSize: 12,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#DCE2E8",
                },
              },
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: legendData[0],
              type: "line",
              data: seriesDatas[0],
              yAxisIndex: 0,
            },
            {
              name: legendData[1],
              type: "line",
              data: seriesDatas[1],
              yAxisIndex: 1,
            },
            {
              name: legendData[2],
              type: "line",
              data: seriesDatas[2],
              yAxisIndex: 1,
            },
          ],
          // large:true,//开启大数据量优化，在数据特别多而出现图形卡顿时候开启
        };
      ticket.setOption(option);
    }
  }
}
</script>
